<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>3-2 主轴方向 与换行 </title>
	</head>


	<!--
	 
	 flex-direction 
	 
	 作用  子元素在父元素中的排列方式 
	 默认值  row 
	 flex-direction: row;
	 flex-direction: row-reverse;
	 flex-direction: column;
	 flex-direction: column-reverse;
	 
	 
	 flex-wrap  
	 作用： 子元素 在父元素盒子中 是否换行(换列)
	 
	 nowrap
	 wrap
	 wrap-reverse
	
	
	
	简写方式 ： 两个值方向 flex-direction, flex-wrap
	flex-flow: row wrap;
	
	flex-flow: row no-wrap;
		
		
		
	
	
	父元素 不够宽度的话， 自动压缩子元素的大小，来适应容器
	 -->

	<style>
		* {
			margin: 0;
			padding: 0;
			/* box-sizing: border-box; */
			box-sizing: content-box;
			
		}


		.container {
			font-size: 28px;
			width: 400px;
			display: flex;
			flex-direction: row;
			/* flex-wrap: wrap-reverse; */
			flex-wrap: wrap;
			
			/* flex-flow: row wrap; */
			border: 0.2px solid black;
			/* background-color: rgb(152,0,0,.1); */
			/* background-color: aqua; */
		}

		.container div {
			width: 100px;
			height: 100px;
			background-color: rgba(0, 0, 0, .1);
			margin: 1px;
		}

		div {
			/* 			 
			 flex-direction: row;
			 flex-direction: row-reverse;
			 flex-direction: column;
			 flex-direction: column-reverse; */
		}
	</style>


	<body>

		<div class="container">

			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			
		<!-- 	<div>5</div>
			<div>6</div> -->
		</div>
		
		
		<div>
			A
		</div>

	</body>
</html>
